XMPP / WebRTC Signaling Flow Visualizer 📚 Teaching Demo – Dr. Haitao Xu

Simulated demo for CS teaching: networks, cybersecurity, software engineering, data science, and programming.
Packet loss:
🧑‍🏫 Classroom Use
🎓 Course Mapping & Learning Goals
Select a course to see what concepts this demo illustrates and what students are expected to learn.
Course focus:
What students need to understand
    Teaching goals (for this demo)
      Example student activities

        ① XMPP Signaling Layer

        Presence / message / IQ stanzas between clients and server.
        A
        Client A
        Caller
        ☁
        XMPP Server
        Signaling / routing
        B
        Client B
        Callee
        <message> invite to conference
        <iq> signaling / routing
        <presence> accept & join

        ② WebRTC Media Path

        RTP / RTCP media stream directly between clients.
        A
        Client A
        Camera / Mic
        B
        Client B
        Speaker / Screen
        Idle
        Media quality: waiting for call...
        🔁 XMPP Layer (signaling)
        • <presence> – indicates availability / join a room.
        • <message> – carries chat text or call invitation.
        • <iq> – request/response for configuration or negotiation.
        • All centered around the XMPP server (routing hub).
        🎥 WebRTC Layer (media)
        • Once signaling is done, a peer-to-peer RTP/RTCP stream is established.
        • Packet loss affects effective quality (latency, jitter, visible glitches).
        • This demo uses fake packets to visualize different loss levels.